<template>
  <div class="container">
    <a-space direction="vertical" style="width: 100%" :size="16">
      <a-card style="width: 100%" title="申请新品">
        <a-form :model="formState">
          <a-row :gutter="24">
            <a-col :span="6">
              <a-form-item label="商品名称">
                <a-input
                  v-model:value="formState.name"
                  placeholder="输入商品名称关键词"
                />
              </a-form-item>
            </a-col>

            <a-col :span="6">
              <a-form-item label="商品类目">
                <a-select
                  ref="select"
                  v-model:value="formState.categoryId"
                  placeholder="商品类目"
                  @change="handleChangeType"
                >
                  <a-select-option :value="0">全部</a-select-option>
                  <a-select-option
                    v-for="item in goodsTypeList"
                    :key="item.id"
                    :value="item.id"
                    >{{ item.name }}</a-select-option
                  >
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="子类目">
                <a-select
                  ref="select"
                  v-model:value="formState.subCategoryId"
                  placeholder="商品子类目"
                >
                  <a-select-option :value="0">全部</a-select-option>
                  <template
                    v-if="
                      subcategoryList[0] &&
                      subcategoryList[0].childrenList.length > 0
                    "
                  >
                    <a-select-option
                      v-for="item in subcategoryList[0].childrenList"
                      :key="item.id"
                      :value="item.id"
                      >{{ item.name }}</a-select-option
                    >
                  </template>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :span="6">
              <a-form-item label="申请状态">
                <a-select
                  ref="select"
                  v-model:value="formState.status"
                  placeholder="申请状态"
                >
                  <a-select-option :value="0">全部</a-select-option>
                  <a-select-option
                    :value="item.value"
                    v-for="(item, index) in applicationStatus.data"
                    >{{ item.name }}</a-select-option
                  >
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>

        <div class="layout-flexSpace">
          <a-space wrap>
            <a-button type="primary" @click="handleSearch">查询</a-button>
            <a-button @click="handleReset">重置</a-button>
          </a-space>
          <a-space wrap>
            <a-button type="primary" @click="handleExport">导出</a-button>
          </a-space>
        </div>
      </a-card>

      <a-card>
        <a-table
          :dataSource="dataSource"
          :columns="applyColumns"
          :pagination="pagination"
          @change="handleChangeSize"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'status'">
              {{ applicationStatus.getNameByValue(record.status + 1) }}
            </template>
            <template v-if="column.key === 'operate'">
              <a-space wrap>
                <a-button @click="seeFunc(record)">查看</a-button>
                <a-button
                  type="primary"
                  @click="handleAgree(record)"
                  v-if="record.status == 0"
                  >同意</a-button
                >
                <template v-if="record.status == 2 || record.status == 3">
                  <a-button danger type="primary" @click="handleReject(record)"
                    >拒绝</a-button
                  >
                </template>
              </a-space>
            </template>
          </template>
        </a-table>
      </a-card>
    </a-space>
    <!-- 添加新品 -->
    <applicationGoods ref="applicationGoodsRef"></applicationGoods>
    <!-- 申请详情 -->
    <applicationGoodsInfo ref="applicationGoodsInfoRef"></applicationGoodsInfo>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted } from "vue";
import applicationStatus from "../../enums/applicationStatus.js";
import applicationGoods from "./categoryApplyForModule/applicationGoods.vue";
import applicationGoodsInfo from "./categoryApplyForModule/applicationGoodsInfo.vue";
import { applyColumns } from "./columns.js";
import { goodsApplyList, exportGoodsApply } from "@/api/goods";
import { goodsType, goodsFineness } from "@/api/order";
import { exporeFile } from "@/utils/exporeFile";
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total) => `共 ${total} 条`,
});
const formState = ref({
  page: pagination.value.current,
  pageSize: pagination.value.pageSize,
  categoryId: undefined,
  subCategoryId: undefined,
  searchCondition: undefined,
  status: undefined,
});
const dataSource = ref([]);

//查看详情
const applicationGoodsInfoRef = ref(null);
const seeFunc = (record) => {
  applicationGoodsInfoRef.value.open(record);
};

const goodsTypeList = ref([]);
const getGoodsType = async () => {
  const result = await goodsType();
  if (result.code == 200) {
    goodsTypeList.value = result.data;
  }
};
const goodsFinenessList = ref([]);
const getGoodsFineness = async () => {
  const result = await goodsFineness();
  if (result.code == 200) {
    goodsFinenessList.value = result.data;
  }
};
const subcategoryList = ref([]);
function handleChangeType(val) {
  formState.value.subCategoryId = undefined;
  subcategoryList.value = goodsTypeList.value.filter(
    (value) => value.id == val
  );
}
function handleReset() {
  formState.value = {
    page: 1,
    pageSize: 10,
    categoryId: undefined,
    subCategoryId: undefined,
    searchCondition: undefined,
    status: undefined,
  };
  pagination.value.current = 1
  pagination.value.pageSize = 10
  getGoodsApplyList();
}
const getGoodsApplyList = async () => {
  const result = await goodsApplyList(formState.value);
  if (result.code == 200) {
    dataSource.value = result.data.list;
    pagination.value.total = result.data.total;
  }
};
function handleChangeSize(page) {
  formState.value.page = page.current;
  formState.value.pageSize = page.pageSize;
  pagination.value.current = page.current;
  pagination.value.pageSize = page.pageSize;
  getGoodsApplyList();
}
function handleSearch() {
  formState.value.page = 1
  formState.value.pageSize = 10
  getGoodsApplyList();
}
const applicationGoodsRef = ref(null);
function handleAgree(record) {
  applicationGoodsRef.value.open(
    goodsTypeList.value,
    goodsFinenessList.value,
    record
  );
}
// 拒绝
function handleReject(record) {
  // applicationGoodsRef.value.open(record)
}
const handleExport = async () => {
  const data = await exportGoodsApply(formState.value);
  exporeFile("新品列表.xls", data);
};
onMounted(() => {
  getGoodsApplyList();
  getGoodsFineness();
  getGoodsType();
});
</script>

<style lang="less">
.img-item {
  display: flex;
  flex-direction: column;
  align-items: center;

  .img-label {
    margin-top: 6px;
    color: #9599a5;
    font-size: 12px;
  }
}
</style>
